<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/gg.css">
    <link rel="stylesheet" href="./css/iconfont.css">
</head>

<body>
    <div class="top position">
        <header>
            <div class="topnav clearFix">
                <div class="box mar clearFix">
                    <p class="lf phone">
                        <i class="iconfont icon-dianhua"></i>
                        <span>+ 1234 890 - 10</span>
                    </p>
                    <p class="lf email">
                        <i class="iconfont icon-youjian_o"></i>
                        <a href="">1067124132@qq.com</a>
                    </p>
                    <nav class="rg clearFix">
                        <li><a href="">
                                <i class="iconfont icon-weixin"></i>
                            </a></li>
                        <li><a href="">
                                <i class="iconfont icon-wangluo"></i>
                            </a></li>
                        <li><a href="">
                                <i class="iconfont icon-zhifubao"></i>
                            </a></li>
                        <li><a href="">
                                <i class="iconfont icon-Google"></i>
                            </a></li>
                    </nav>
                </div>
            </div>
        </header>
        <div class="cont box clearFix mar">
            <h1 class="lf">食谱</h1>
            <nav class="rg">
                <li>主页</li>
                <li>关于</li>
                <li class="position">菜单 <i>v</i>
                    <div>
                        <p>荤菜</p>
                        <p>素菜</p>
                        <p>饮品</p>
                        <p>烧烤</p>
                    </div>
                </li>
                <li>肉类</li>
                <li>蔬菜</li>
            </nav>
        </div>
        <div class="bannertext box mar ">
            <div class="bannercontbox position">
                <div class="bannertextcont display">
                    <h2 class="mar">菜脯西芹肉末</h2>
                    <p class="js mar">家庭下饭菜说起来容易做也行，就是肉肉与菜菜的有机结合，再搞点较重口味的配菜，成本低又下饭。</p>
                    <div class="pxiang mar ">
                        <p>做法：</p>
                        <p>一、把材料备好，洗净吸干水；</p>
                        <p>二、榨菜与菜脯切粒洗两次水以降咸度，然后用手抓干；</p>
                        <p>三、青椒、蒜头和生姜剁成末；</p>
                        <p>四、西芹切粒；</p>

                    </div>
                    <button>了解详情</button>
                </div>
                <div class="bannertextcont">
                    <h2 class="mar">紫苏炒鸡翅</h2>
                    <p class="js mar">种了一盘紫苏，有收获了，剪一些来做菜，记得在国内炒田螺时一定要放紫苏，但从来没过用来炒菜，后来看网上有网友介绍紫苏炒鸡，咱就试试呗。</p>
                    <div class="pxiang mar">
                        <p>做法：</p>
                        <p>一、把鸡翅打竖破半，这种做法比较容易熟；</p>
                        <p>二、置一碗，放鸡翅入碗，加入精盐1/4小勺、胡椒粉1/4小勺、米酒1大勺、味啉1/2大勺、玉米淀粉2大勺、抓均匀，再加菜油1大勺，再抓匀；</p>
                        <p>三、把两棵紫苏剁碎，把蒜头2瓣、生姜1指节大、葱头1粒、青椒/2条切小块后入蒜头切割器，拉动切割器，切割成末；</p>
                        <p>四、锅放鸡翅，开中火，底面两边煎成金黄色;</p>
                    </div>
                    <button>了解详情</button>
                </div>
                <div class="bannertextcont">
                    <h2 class="mar">凤梨鸡翅</h2>
                    <p class="js mar">
                        凤梨烂市很便宜，每次去超市都买，总是想着办法搞搞新意思，又从网上学着把鸡翅竖切，这样比较易熟和入味，可惜的是凤梨已经用旋转切割器来切割，只能切成块，所以从造形上条块不一，但从味道来说是十分惹味和搭配的。还有一点，在做芡汁时适当地加入碎凤梨或菠萝，整盘菜更加突显出果味的鲜香。
                    </p>
                    <div class="pxiang mar">
                        <p>做法：</p>
                        <p>一、把鸡翅剁去翅尖，打竖破半，加入精盐1/4小勺、胡椒粉1/4小勺，抓均匀后加玉米淀粉2大勺，再抓均匀；</p>
                        <p>二、把凤梨切成块，放入一碗中，放入凤梨，加水没翅膀面，放入精盐1/2小勺，搅拌均匀，浸泡约1分钟，捞起沥水；</p>
                        <p>三、在泡过的凤梨中取出几块剁碎，量约1/4杯放入碗中；</p>
                        <p>四、在碗中加入白醋1大勺、白糖1大勺、清水1/3杯、生粉1/2大勺、精盐1/6小勺、芝麻油1小勺，搅拌均匀；</p>
                    </div>
                    <button>了解详情</button>
                </div>

            </div>
            <div class="bannerindex mar">

            </div>
        </div>
    </div>

    <div class="fw">
        <div class="fwbox clearFix mar box">
            <h2>我 们 的 服 务</h2>
            <div class="fwcont clearFix">
                <div class="fwimg lf">
                    <img src="./images/2.jpg" alt="">
                </div>
                <div class="fwtext lf clearFix">
                    <div class="fwtextbox">
                        <h2><i class="iconfont icon-anchor"></i></h2>
                        <p class="js">
                            为客户提供价值的一种手段，使客户不用承担额外的成本和风险就可获得所期望的结果
                        </p>
                        <p class="xq">艺术家对于自然有着双重关系，他既是自然的主宰，又是自然的奴隶，他是自然的奴隶，因为他必须用人世间的材料进行工作，才能使人理解；同时他又是自然的主宰</p>
                    </div>
                    <div class="fwtextbox">
                        <h2><i class="iconfont icon-duihua"></i></h2>
                        <p class="js">
                            为客户提供价值的一种手段，使客户不用承担额外的成本和风险就可获得所期望的结果
                        </p>
                        <p class="xq">艺术家对于自然有着双重关系，他既是自然的主宰，又是自然的奴隶，他是自然的奴隶，因为他必须用人世间的材料进行工作，才能使人理解；同时他又是自然的主宰</p>
                    </div>
                    <div class="fwtextbox">
                        <h2><i class="iconfont icon-weixiao"></i></h2>
                        <p class="js">
                            为客户提供价值的一种手段，使客户不用承担额外的成本和风险就可获得所期望的结果
                        </p>
                        <p class="xq">艺术家对于自然有着双重关系，他既是自然的主宰，又是自然的奴隶，他是自然的奴隶，因为他必须用人世间的材料进行工作，才能使人理解；同时他又是自然的主宰</p>
                    </div>
                    <div class="fwtextbox">
                        <h2><i class="iconfont icon-dianzan_kuai"></i></h2>
                        <p class="js">
                            为客户提供价值的一种手段，使客户不用承担额外的成本和风险就可获得所期望的结果
                        </p>
                        <p class="xq">艺术家对于自然有着双重关系，他既是自然的主宰，又是自然的奴隶，他是自然的奴隶，因为他必须用人世间的材料进行工作，才能使人理解；同时他又是自然的主宰</p>
                    </div>
                    <div class="fwtextbox">
                        <h2><i class="iconfont icon-wangluo"></i></h2>
                        <p class="js">
                            为客户提供价值的一种手段，使客户不用承担额外的成本和风险就可获得所期望的结果
                        </p>
                        <p class="xq">艺术家对于自然有着双重关系，他既是自然的主宰，又是自然的奴隶，他是自然的奴隶，因为他必须用人世间的材料进行工作，才能使人理解；同时他又是自然的主宰</p>
                    </div>
                    <div class="fwtextbox">
                        <h2><i class="iconfont icon-xitongtuisong"></i></h2>
                        <p class="js">
                            为客户提供价值的一种手段，使客户不用承担额外的成本和风险就可获得所期望的结果
                        </p>
                        <p class="xq">艺术家对于自然有着双重关系，他既是自然的主宰，又是自然的奴隶，他是自然的奴隶，因为他必须用人世间的材料进行工作，才能使人理解；同时他又是自然的主宰</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="jgbox">
        <div class="jg mar box clearFix position">
            <h2>今 天 的 价 格</h2>
            <div class="jgcont display">
                <h3>50%</h3>
                <p class="jgtext mar">聚划算</p>
                <p class="jgxq mar">
                    本次聚划算团购活动的只限于江湖用户参加，必须经由敲定江湖活动获得的链接拍下宝贝，才算有效的团购行为，卖家将核对敲定名单才给予发货户参加，必须经由敲定江湖活动获得的链接拍下宝贝，才算有效的团购行为，卖家将核对敲定名单才给予发货。
                </p>
            </div>
            <div class="jgcont">
                <h3>66%</h3>
                <p class="jgtext mar">优品会</p>
                <p class="jgxq mar">
                    本次聚划算团购活动，必须经由敲定江湖活动获得的链接拍下宝贝，才算有效的团购行为，卖家将核对敲定名单才给予发货户参加，必须经由敲定江湖活动获得的链接拍下宝贝，才算有效的团购行为，卖家将核对敲定名单才给予发货。
                </p>
            </div>
            <div class="jgcont">
                <h3>70%</h3>
                <p class="jgtext mar">拼多多</p>
                <p class="jgxq mar">
                    本次聚划算团购活动的console.log($((".jgcont")[index]))console.log($((".jgcont")[index]))定江湖活动获得的链接拍下宝贝，才算有效的团购行为，卖家将核对敲定名单才给予发货户参加，必须经由敲定江湖活动获得的链接拍下宝贝，才算有效的团购行为，卖家将核对敲定名单才给予发货。
                </p>
            </div>
        </div>
    </div>
    <div class="cp">
        <div class="cpbox clearFix box mar">
            <h2>今 天 的 菜 品</h2>
            <div class="cpcont">
                <div class="cpcontp clearFix">
                    <ul class="clearFix lf">
                        <li><img src="./images/s1.jpg" alt="">
                            <p class="cpxq">种了一盘紫苏，有收获了，剪一些来做菜，记得在，记得在国内炒田螺时一定要放紫苏</p>
                            <p class="cpjg"><span class="yuanjia">20￥</span><span class="youhui">5￥</span></p>
                        </li>
                        <li><img src="./images/s2.jpg" alt="">
                            <p class="cpxq">种了一盘紫苏，有收获了，剪一些来做菜，记得在，记得在国内炒田螺时一定要放紫苏</p>
                            <p class="cpjg"><span class="yuanjia">35￥</span><span class="youhui">15￥</span></p>
                        </li>
                        <li><img src="./images/s3.jpg" alt="">
                            <p class="cpxq">种了一盘紫苏，有收获了，剪一些来做菜，记得在，记得在国内炒田螺时一定要放紫苏</p>
                            <p class="cpjg"><span class="yuanjia">40￥</span><span class="youhui">25￥</span></p>
                        </li>
                        <li><img src="./images/s4.jpg" alt="">
                            <p class="cpxq">种了一盘紫苏，有收获了，剪一些来做菜，记得在，记得在国内炒田螺时一定要放紫苏</p>
                            <p class="cpjg"><span class="yuanjia">210￥</span><span class="youhui">52￥</span></p>
                        </li>
                    </ul>
                    <ul class="clearFix lf">
                        <li><img src="./images/s1.jpg" alt="">
                            <p class="cpxq">种了一盘紫苏，有收获了，剪一些来做菜，记得在，记得在国内炒田螺时一定要放紫苏</p>
                            <p class="cpjg"><span class="yuanjia">20￥</span><span class="youhui">5￥</span></p>
                        </li>
                        <li><img src="./images/s3.jpg" alt="">
                            <p class="cpxq">种了一盘紫苏，有收获了，剪一些来做菜，记得在，记得在国内炒田螺时一定要放紫苏</p>
                            <p class="cpjg"><span class="yuanjia">35￥</span><span class="youhui">15￥</span></p>
                        </li>
                        <li><img src="./images/s2.jpg" alt="">
                            <p class="cpxq">种了一盘紫苏，有收获了，剪一些来做菜，记得在，记得在国内炒田螺时一定要放紫苏</p>
                            <p class="cpjg"><span class="yuanjia">40￥</span><span class="youhui">25￥</span></p>
                        </li>
                        <li><img src="./images/s4.jpg" alt="">
                            <p class="cpxq">种了一盘紫苏，有收获了，剪一些来做菜，记得在，记得在国内炒田螺时一定要放紫苏</p>
                            <p class="cpjg"><span class="yuanjia">210￥</span><span class="youhui">52￥</span></p>
                        </li>
                    </ul>
                    <ul class="clearFix lf">
                        <li><img src="./images/s4.jpg" alt="">
                            <p class="cpxq">种了一盘紫苏，有收获了，剪一些来做菜，记得在，记得在国内炒田螺时一定要放紫苏</p>
                            <p class="cpjg"><span class="yuanjia">20￥</span><span class="youhui">5￥</span></p>
                        </li>
                        <li><img src="./images/s2.jpg" alt="">
                            <p class="cpxq">种了一盘紫苏，有收获了，剪一些来做菜，记得在，记得在国内炒田螺时一定要放紫苏</p>
                            <p class="cpjg"><span class="yuanjia">35￥</span><span class="youhui">15￥</span></p>
                        </li>
                        <li><img src="./images/s1.jpg" alt="">
                            <p class="cpxq">种了一盘紫苏，有收获了，剪一些来做菜，记得在，记得在国内炒田螺时一定要放紫苏</p>
                            <p class="cpjg"><span class="yuanjia">40￥</span><span class="youhui">25￥</span></p>
                        </li>
                        <li><img src="./images/s3.jpg" alt="">
                            <p class="cpxq">种了一盘紫苏，有收获了，剪一些来做菜，记得在，记得在国内炒田螺时一定要放紫苏</p>
                            <p class="cpjg"><span class="yuanjia">210￥</span><span class="youhui">52￥</span></p>
                        </li>
                    </ul>
                </div>
               
            </div>
            <div class="cpanniu">
               
               </div>
        </div>
        
    </div>
    <footer>
        <div class="foot mar box clearFix">
            <div class="lf">
                <h3>地址</h3>
                <p>Eiusmod Tempor inc</p>
                <p>St Dolore Place,Kingsport 56777.</p>
                <p>Phone : +1 123 456 789</p>
                <p>Email : 1067124132@qq.com</p>
            </div>
            <div class="lf cd">
                <h3>菜单</h3>
                <p>主页</p>
                <p>关于</p>
                <p>菜单</p>
                <p>肉类</p>
                <p>蔬菜</p>
            </div>
            <div class="lf tx">
                <h3>通讯</h3>
                <p>
                    <span><i class="iconfont icon-weixin"></i></i></span>
                    <span> <i class="iconfont icon-wangluo"></i></span>
                    <span><i class="iconfont icon-zhifubao"></i></span>
                    <span><i class="iconfont icon-Google"></i></span>
                </p>
            </div>
            <div class="lf tj">
                <h3>提交</h3>
                <p><input type="text" placeholder="请填写文字"></p>
                <p><button>提交</button></p>
            </div>
        </div>
        <p class="jwtext">Copyright © 2021.Company name All rights reserved.</p>
    </footer>
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script src="./js/index.js"></script>

</body>

</html>